<!--
 * @FilePath: auth_login.vue
 * @@author: wjj
 * @Date: 2025-05-16 22:54:57
 * @@Description: new js file
-->
<template>
  <div
    class="auth_login_container"
    :style="{ backgroundImage: 'url(' + urlImage + ')' }"
  >
    <button
      type="button"
      class="btn"
      style="padding: 150px 100px"
      @click="auth_login"
    >
      <strong style="font-size: 66px">Go to Construct</strong>
      <div id="container-stars">
        <div id="stars"></div>
      </div>

      <div id="glow">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </button>
  </div>
</template>

<script lang='ts' setup name='本组件名'>
import { ref, onMounted } from 'vue'
import authbackgroundImage from '@/assets/images/mytu/feishu.jfif'
import useUserStore from '@/store/modules/user'
import { ElNotification } from 'element-plus'
//引入获取当前时间的函数
import { getTime } from '@/utils/time'
//统一管理咱们项目用户相关的接口
import request from '@/utils/request'
//引入操作本地存储的工具方法
import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '@/utils/token'
// TODO TS忽略
// @ts-ignore
import JSONbig from 'json-bigint'
let aa = JSONbig.parse(
  '{"id": 449201227805229056, "timestamp": 1654099200000123456}',
)
import { md5 } from 'js-md5'
console.log(md5('wjj1994'))
console.log(aa)
console.log(JSONbig.stringify(aa))
let useStore = useUserStore()
let urlImage = ref(authbackgroundImage)
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
console.log(route.path) // 响应式路由对象
console.log(route.params) // 响应式路由对象

//获取路由器
let $router = useRouter()
//路由对象
let $route = useRoute()
const auth_login = async () => {
  const urlParams = new URLSearchParams(window.location.search)
  const code = urlParams.get('code')
  // let fullurl = window.location.href
  // let code = fullurl.split('?code=')[1].split('#')[0]
  var hostname = window.location.hostname
  var host = window.location.host
  var port =
    window.location.port ||
    (window.location.protocol === 'https:' ? '443' : '80')
  console.log(hostname)
  console.log(port)
  //保证登录成功
  request
    .get<any, any>('/nimi/auth/user/auth_login?code=' + code)
    .then((res: any) => {
      //pinia仓库存储一下token
      //由于pinia|vuex存储数据其实利用js对象
      if (res.code == 200) {
        console.log(res.data.Authorization)
        useStore.Authorization = res.data.Authorization as string

        //本地存储持久化存储一份
        SET_TOKEN(res.data.Authorization as string)
        // let redirect: any = $route.query.redirect
        // $router.push({ path: redirect || '/' })
        // $router.replace({ path: '/' })
        window.location.href = 'http://' + host
        //登录成功提示信息
        ElNotification({
          type: 'success',
          // icon: load,
          message: '欢迎回来',
          title: `HI,${getTime()}好`,
        })
      } else {
        ElNotification({
          type: 'error',
          // icon: load,
          message: res.msg,
          duration: 3000,
        })
      }
    })
    .catch((error) => {
      //登录失败的提示信息,error.message捕捉的就是抛出的异常信息,如result.data
      ElNotification({
        type: 'error',
        // icon: load,
        message: error.msg,
        duration: 3000,
      })
    })
}
//获取的数据
onMounted(() => {
  auth_login()
})
auth_login()
</script>
<style scope lang='scss'>
.auth_login_container {
  width: 100%;
  height: 100vh; //浏览器高度
  // background: url('@/assets/images/mytu/background1.jpg') no-repeat;
  // background-position: center center;
  background-repeat: no-repeat;
  // background-attachment: fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* From Uiverse.io by StealthWorm */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85rem;
  overflow: hidden;
  height: 8rem;
  background-size: 300% 300%;
  cursor: pointer;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),
    linear-gradient(
      137.48deg,
      #ffdb3b 10%,
      #fe53bb 45%,
      #8f51ea 67%,
      #0044ff 87%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#container-stars {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

strong {
  z-index: 2;
  font-family: 'Avalors Personal Use';
  font-size: 12px;
  letter-spacing: 5px;
  color: #ffffff;
  text-shadow: 0 0 4px white;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn:hover {
  transform: scale(1.1);
}

.btn:active {
  border: double 4px #fe53bb;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.btn:active .circle {
  background: #fe53bb;
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: '';
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}

@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
</style>